<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>布局练习</title>
  <style>
    main div {
      border: 1px solid red;
      margin: 1em;
      text-align: center;
      line-height: 1.5;
      padding: 1em;
    }

    #main {
      width: 600px;
      height: 400px;
    }

    #left,
    #right {
      float: left;
      height: 100px;
      width: 100px;
    }

    #middle {
      height: 100px;
      width: 100px;
      border: 1px solid red;
      float: left;
    }

    /* #main div {
      float: right;
    } */

  </style>
</head>

<body>
  <header>
    <ul>
      <li>第一次练习</li>
      <li>CSS练习</li>
      <li><a href="../03/plan.html">布局练习</a></li>
      <li><a href="../index.html">返回首页</a></li>
    </ul>
  </header>
  <!-- html 注释 -->
  <main>
    <div id="head">头部</div>
    <div id="main">
      <div id="left">左侧</div>
      <div id="middle">中间</div>
      <div id="right">右侧</div>
      <p style="clear:both"></p>
      <p>道冲而用之或不盈，渊兮似万物之宗。挫其锐，解其纷，和其光，同其尘。湛兮似或存，吾不知谁之子，象帝之先。</p>
    </div>
  </main>
  <footer>
    <p>学号：xxxx 《XXXX课程作业》</p>
  </footer>
</body>

</html>
